<template>
	<view class="collaboration">
		<navbar myprops="律师协作-九一律师咨询"></navbar>
		<uni-nav-bar backgroundColor="#EDEDED" :border="false" left-icon="left" leftText="取消" @clickLeft="onClickLeft" />
		<view class="collaboration-content">
			<view class="collaboration-content-vw-top-img">
				<image class="blue-img" src="../../../static/蓝背景.png" mode=""></image>
				<image class="lucency-img" src="../../../static/透明握手.png" mode=""></image>
			</view>
			<view class="collaboration-content-vw">
				<view class="collaboration-content-vw-top">
					<image src="../../../static/帮助蓝.png" mode=""></image>
					<view class="collaboration-content-vw-top-vw">
						律师协作
						<text>您发布的协作需求将由平台律师主动应征。与律师确认协 作后由您支付费用。在协作完成前费用由平台保管，待您 确认完成协作内容后，平台将费用支付给应征律师。</text>
					</view>
				</view>
				<view class="collaboration-content-vw-content">
					<van-field
					  :value="fieldValue"
					  is-link
					  readonly
						required
					  label="协作类型"
						input-align= 'right'
					  placeholder="请选择"
						custom-style="font-weight: bold;"
					  @tap="onClick"
					/>
					<van-popup :show="show" round position="bottom">
						<van-cascader
							:value="cascaderValue"
							title="请选择协作类型"
							:options="columns"
							:field-names="fieldNames"
							@close="onCancel"
							@finish="onConfirm"
						/>
					</van-popup>
					<van-field
					  :value="fildValue"
					  is-link
					  readonly
						required
					  label="协作地区"
						input-align= 'right'
						custom-style="font-weight: bold;"
					  placeholder="请选择"
						@tap="onClickhandler"
					/>
					<van-popup :show="showPickerPopup" round position="bottom">
						<van-area :area-list="areaList" :columns-num="2"  @cancel="onCancelaS" @confirm="onConfirmaS" />
					</van-popup>
					<van-field
					  :value="price"
						required
					  label="预估价格"
						input-align= 'right'
					  placeholder="请输入"
						custom-style="font-weight: bold;"
						@change="onChange"
					/>
					<view class="majorQuestion-text-tea">
						<textarea :value="texts" style="height: 280rpx; width: 654rpx;" placeholder-style="color:#C0C0C0; font-size: 26rpx" placeholder="简单输入协作内容及要求" @input="inputs"/>
					</view>
					<view class="picker-upload">
						<uni-file-picker
							v-model="imageValue1" 
							fileMediatype="image" 
							:image-styles="imageStyles"
							:limit="1"
							@select="sele"
							mode="grid">
							<image class="pickerimg1" src="../../../static/AK-MN_上传图片@1x.png" mode=""></image>
						</uni-file-picker>
					</view>
				</view>
			</view>
			<view class="collaboration-content-bottom">
				<van-button type="info" round block @click="fabu">发布协作</van-button>
			</view>
		</view>
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import { areaList } from '@vant/area-data';
	import Toast from '@vant/weapp/dist/toast/toast';
	import { getcoopType, upload_image, putcoop } from '../../../utils/utils';
	export default {
		data() {
			return {
				fieldValue: '', // 协作类型的值
				fildValue: '', // 协作地区的值
				show: false, // 协作类型弹出层
				showPickerPopup: false, // 协作地区弹出层
				columns: [], // 协作类型
				imageValue1: '', // 图片上传后的数据
				srcList: '', // 图书上传返回的地址
				imageStyles:{ // 图片样式
					width:68,
					height:68,
					border: {
						"color":"#999999",
						"style":"dashed",
					}
				},
				fieldNames: { // 协作类型自定义字段名
					text: 'name',
					value: 'id',
					children: 'children',
				},
				name1: '', // 选中协作类型一
				name2: '', // 选中协作类型二
				areaList, // 全国数据
				province: '', // 省
				city: '', // 市
				texts: '', // 内容
				price: '', // 预估价格
			}
		},
		onLoad() {
			// 获取协作类型
			getcoopType((e) => {
				// console.log('协作类型', e);
				this.columns = e.data
			})
		},
		methods: {
			// 上传图片逻辑
			sele (event) {
				const upload = event.tempFiles[0]
				console.log(upload.path);
				upload_image(upload.path, (e) => {
					let dataObj = JSON.parse(e)
					console.log('成功', dataObj);
					this.srcList = dataObj.data.url
				})
			},
			// 返回
			onClickLeft () {
				uni.navigateBack(-1)
			},
			// 打开协作类型模态框
			onClick () {
				this.show = true
			},
			// 打开协作地区模态框
			onClickhandler () {
				this.showPickerPopup = true
			},
			// 协作类型确认逻辑
			onConfirm(e) {
				const { selectedOptions, value } = e.detail;
				const fieldValue = selectedOptions
					.map((option) => option.name)
					.join(',');
				this.name1 = selectedOptions[0].name
				this.name2 = selectedOptions[1].name
				// console.log('selected:', fieldValue);
				console.log(this.name1);
				console.log(this.name2);
				this.fieldValue = fieldValue
				this.show = false
			},
			// 协作类型取消选择的回调
			onCancel() {
				this.show = false;
			},
			// 协作地区确认逻辑
			onConfirmaS (e) {
				const { values } = e.detail;
				console.log('selected:', values);
				const fieldValue = values
					.map((option) => option.name)
					.join(',');
					values[0].name
				this.province = values[0].name
				this.city = values[1].name
				this.fildValue = fieldValue
				this.showPickerPopup = false
			},
			// 协作地区取消选择的回调
			onCancelaS () {
				this.showPickerPopup = false;
			},
			// 预估金额
			onChange (e) {
				this.price = e.detail
			},
			// 协作内容
			inputs (e) {
				// console.log(e.detail.value);
				this.texts = e.detail.value
			},
			// 发布协作
			fabu () {
				if(this.name1.trim() && this.province.trim() && this.texts.trim() && this.price.trim()) {
					let a = {
						name1: this.name1,
						name2: this.name2,
						province: this.province,
						city: this.city,
						content: this.texts,
						price: this.price,
						img: this.srcList
					}
					console.log(a);
					putcoop(a, (e) => {
						console.log(e);
						if (e.status == 200) {
							Toast(e.msg)
							setTimeout(() => {
								uni.redirectTo({
									url: "/pages/Attorney side/myCollaboration/myCollaboration"
								})
							},1500)
						} else {
							Toast(e.msg)
						}
					})
				} else {
					Toast('有内容为空请确认')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

	.collaboration {
		height: 100vh;
		background-color: #EDEDED;
	}
	.collaboration-content {
		width: 710rpx;
		height: 964rpx;
		margin: 30px auto 0;
		background-color: white;
		border-radius: 24rpx;
		position: relative;
	}
	
	
	.collaboration-content-vw-top {
		width: 710rpx;
		height: 240rpx;
		overflow: hidden;
		background: #F5F6F8;
		border-radius: 24rpx 24rpx 0 0;
	}
	.collaboration-content-vw-top > image {
		width: 52rpx;
		height: 52rpx;
		position: absolute;
		right: 20rpx;
		top: 12rpx;
	}
	
	.collaboration-content-vw-top-vw {
		font-size: 36rpx;
		font-weight: bold;
		line-height: 42rpx;
		color: #383838;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 656rpx;
		height: 148rpx;
		margin: 64rpx 0 0 28rpx;
	}
	.collaboration-content-vw-top-vw > text {
		font-size: 26rpx;
		font-weight: normal;
		line-height: 30rpx;
		color: #808080;
	}
	
	.majorQuestion-text-tea {
		width: 654rpx;
		margin: 24rpx auto;
	}
	.picker-upload {
		margin: 24rpx 0 0 28rpx;
	}
	
	.pickerimg1 {
		width: 40rpx;
		height: 40rpx;
	}
	
	.collaboration-content-bottom {
		width: 690rpx;
		height: 88rpx;
		margin-top: 32rpx;
	}
	
	
	
	.LEFT {
		display: flex;
		align-items: center;
	}
	
	.collaboration-content-vw-top-img {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 300rpx;
		top: -60rpx;
		z-index: 2;
	}
	.blue-img {
		width: 120rpx;
		height: 120rpx;
	}
	.lucency-img {
		width: 80rpx;
		height: 80rpx;
		position: relative;
		left: -98rpx;
		top: 0;
	}
</style>
